<template>
  <el-card shadow="hover" style="margin: 20px;height: 70px">
    <el-form label-width="100px">
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item label="申请人姓名">
            <el-input placeholder="请输入申请人姓名"
                      v-model="searchFrom.username"
                      style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="loadAudit">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <el-card style="margin:20px;">
    <!--  审批状态项  -->
    <el-radio-group style="margin-bottom: 15px;" v-model="type" @change="loadAudit">
      <el-radio-button value="10" size="large">待我审核</el-radio-button>
      <el-radio-button value="20" size="large">待他人审核</el-radio-button>
      <el-radio-button value="30" size="large">已审核</el-radio-button>
      <el-radio-button value="40" size="large">驳回</el-radio-button>
    </el-radio-group>
    <!--  审批列表  -->
    <el-table :data="auditData">
      <el-table-column label="编号" prop="id" align="center" width="55" type="index"/>
      <el-table-column label="申请单号" prop="applyNumber" align="center"/>
      <el-table-column label="申请人" prop="applyName" align="center"/>
      <el-table-column label="申请人部门" prop="department" align="center"
                       :formatter="departmentFormatter"/>
      <el-table-column label="申请人手机号" prop="phone" align="center"/>
      <el-table-column label="申请人邮箱" prop="email" align="center"/>
      <el-table-column label="申请类型" prop="applyType" align="center"
                       :formatter="applyTypeFormatter"/>
      <el-table-column label="申请时间" prop="applyTime" align="center"/>
      <el-table-column label="操作" width="100" align="center"
                       v-if="type==10||type==40">
        <template #default="scope">

          <el-button type="primary" link
                     v-if="type==10 || applyType === 'busrequire'"
                     @click="busrequire(scope.row.auditId)">
            车辆审批
          </el-button>
          <!--一个审批出现对应的按钮，applyType-->

          <el-button type="primary" link v-if="type==40"
                     @click="auditing(scope.row.id)">查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 车辆审批/查看弹窗 -->
  <el-dialog title="查看详情"
             :width="800"
             style="padding: 40px"
             v-model="busrequireVisible">
    <el-descriptions direction="horizontal" :column="2" border>
      <el-descriptions-item label="申请人">{{ busrequireData.username }}</el-descriptions-item>
      <el-descriptions-item label="申请人手机号">{{ busrequireData.phone }}</el-descriptions-item>
      <el-descriptions-item label="申请人邮箱">{{ busrequireData.email }}</el-descriptions-item>
      <el-descriptions-item label="申请人部门">
        {{ departmentFormatter(busrequireData,null,busrequireData.department) }}
      </el-descriptions-item>
      <el-descriptions-item label="使用开始时间">{{ busrequireData.startTime }}</el-descriptions-item>
      <el-descriptions-item label="使用结束时间">{{ busrequireData.endTime }}</el-descriptions-item>
      <el-descriptions-item label="车辆出发地">{{ busrequireData.startPoint }}</el-descriptions-item>
      <el-descriptions-item label="车辆目的地">{{ busrequireData.endPoint }}</el-descriptions-item>
      <el-descriptions-item label="申请原因">{{ busrequireData.reason }}</el-descriptions-item>
      <el-descriptions-item label="申请时间">{{ busrequireData.createTime }}</el-descriptions-item>
      <!--  驳回原因要在点击驳回才显示 -->
      <el-descriptions-item label="驳回原因" v-if="busrequireData.auditStatus==40">
        {{busrequireData.rejectReason}}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer v-if="busrequireData.auditStatus==10">
      <el-button @click="busrequireVisible = false">取消</el-button>
      <el-button type="primary" plain  @click="rejectBusrequireVisible=true">驳回</el-button>
      <el-button type="primary" @click="busrequirePass">通过</el-button>
    </template>
  </el-dialog>

  <!-- 驳回原因弹窗 -->
  <el-dialog title="驳回 查看"
             v-model="rejectBusrequireVisible"
             style="margin-top: 37vh;padding: 40px">
    <el-descriptions direction="horizontal" border>
      <el-descriptions-item label="驳回原因">
        <el-input placeholder="请输入驳回原因" v-model="rejectReason"/>
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button type="primary" plain @click="rejectConfirm">取消</el-button>
      <el-button type="primary" @click="auditReject">确定</el-button>
    </template>
  </el-dialog>

</template>

<script setup>
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";
import qs from "qs";
import {onMounted, ref} from "vue";

const applyTypeList = ref([]);
const departmentArr = ref([]);
onMounted(() => {
  loadDictOptions(departmentArr, 'department')
  loadDictOptions(applyTypeList, 'applyType')
});
const departmentFormatter = (row, column, cellValue, index) => {
  if (!departmentArr.value) {
    return cellValue;
  }
  for (let item of departmentArr.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
};
const applyTypeFormatter = (row, column, cellValue, index) => {
  if (!applyTypeList.value) {
    return cellValue;
  }
  for (let item of applyTypeList.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
};
const auditData = ref([]);
const searchFrom = ref({
  username: '',
  auditStatus: '',
  auditUserId: '',
});
const userId = getUser().id;
const type = ref("10");

const loadAudit = () => {
  searchFrom.value.auditUserId = userId;
  searchFrom.value.auditStatus = type.value;
  let data = qs.stringify(searchFrom.value);
  axios.get(BASE_URL + '/v1/audit/select?' + data)
      .then((response) => {
        if (response.data.code === 2000) {
          auditData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          })
        }
      })
}
const resetSearch = () => {
  searchFrom.value.username = '';
  loadAudit();
}
onMounted(() => {
  loadAudit();
})

const busrequireVisible = ref(false);
const busrequireData = ref({});
const busrequire = (auditId) => {
  busrequireVisible.value = true;
  axios.get(BASE_URL + '/v1/audit/select/busrequire/' + auditId)
      .then((response) => {
        if (response.data.code === 2000) {
          busrequireData.value = response.data.data[0];
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          })
        }
      })
}
const busrequirePass = () => {
  let data = qs.stringify({
    auditId: busrequireData.value.auditId,
    applyId: busrequireData.value.applyId,
    applicationId: busrequireData.value.applicationId,
    status: 30,
    sort: busrequireData.value.sort,
  });
  axios.post(BASE_URL + '/v1/audit/busrequirePass/' , data)
      .then((response) => {
        if (response.data.code === 2000) {
          OKInfo('审批成功');
          busrequireVisible.value = false;
          loadAudit();
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          })
        }
      })
}
const rejectReason = ref('');
const rejectBusrequireVisible = ref(false);
const rejectConfirm = () => {
  ElMessageBox.confirm('您确定要取消吗', '提示', {
    customClass: 'custom-message-box',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    rejectReason.value = '';
    rejectBusrequireVisible.value = false;
  }).catch(() => {

  });
}
const auditReject = () => {
  if (!rejectReason.value || rejectReason.value.trim() == '') {
    errorInfo('请输入驳回原因');
    return;
  }
  let data = qs.stringify(
      {
        auditId: busrequireData.value.auditId,
        applyId: busrequireData.value.applyId,
        applicationId: busrequireData.value.applicationId,
        sort: busrequireData.value.sort,
        status: 40,
        rejectReason: rejectReason.value,
      }
  );
  axios.post(BASE_URL + '/v1/audit/busrequirePass/' , data)
      .then((response) => {
        if (response.data.code === 2000) {
          OKInfo('驳回成功!');
          rejectBusrequireVisible.value = false;
          busrequireVisible.value = false;
          rejectReason.value = '';
          loadAudit();
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          })
        }
      })
}
</script>

<style scoped>

</style>